<script setup>
import { computed, onMounted, reactive, ref } from "vue"
import { info,save } from '@/api/bannerImage'
import { list as bannerList } from '@/api/banner'
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import ImageDialog from '@/components/imageDialog.vue'
import { ElMessage } from "element-plus"
// import Tinymce from '@jsdawn/vue3-tinymce'
import Tinymce from '@/components/tinymce.vue'

const router = useRouter()
const route = useRoute()
const store = useStore()
const formRef = ref()
const loading = ref(false)
const saving = ref(false)
const formLabel = computed(() => {
  return store.state.windowWidth <= 768 ? 'top' : 'right'
})
const form = reactive({
  banner_id: undefined,
  title: '',
  url: '',
  image: '',
  sorting : 0,
  status: 1,
  richtext_test: '',
})
const rules = reactive({
  image: [{required: true, message: "请选择"}],
  banner_id: [{required: true, message: "请选择"}],
})
const banners = ref([])
const imageList = ref([])
onMounted(async() => {
  loading.value = true
  try {
    banners.value = await bannerList({ page_size: -1 })

    if (route.query.id) {
      const res = await info({ id: route.query.id })
      for (const k in form) {
        if (res[k]) {
          form[k] = res[k]
          if (k == 'image') {
            imageList.value = [res[k]]
          }
        }
      }
    }
  } finally {
    loading.value = false
  }
})

function onFormSubmit() {
  if (saving.value) return
    formRef.value.validate(async (v) => {
      if (!v) return

      saving.value = true
      try {
        await save({
          id: route.query.id,
          ...form
        })
        ElMessage.success('保存成功')
        router.go(-1)
      } finally {
        saving.value = false
      }
    })
  }
function goback() {
  router.go(-1)
}
function imgChange() {
  form.image = imageList.value.length > 0 ? imageList.value[0] : ''
}

</script>

<template>
  <el-form ref="formRef" class="form"
  label-width="auto" :label-position="formLabel"
  :model="form" :rules="rules">
    <div v-loading="loading" class="form-inputs">
      <el-form-item label="所属banner" prop="banner_id">
        <el-select v-model="form.banner_id">
          <el-option v-for="item in banners" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="图片" prop="image">
        <image-dialog :imageList="imageList" :max="1" @change="imgChange" />
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="url">
        <el-input v-model="form.url" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="form.sorting" />
      </el-form-item>
      <el-form-item label="富文本测试">
        <Tinymce v-model="form.richtext_test" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="form.status" :label="0">禁用</el-radio>
        <el-radio v-model="form.status" :label="1">启用</el-radio>
      </el-form-item>
    </div>
    <el-form-item class="form-submits">
      <el-button type="primary" @click="onFormSubmit" :loading="saving">保存</el-button>
      <el-button @click="goback">返回</el-button>
    </el-form-item>
  </el-form>
  
</template>

<style scoped>
  .form {
    background: #fff;
  }
  .form-inputs {
    padding-bottom: 60px;
    width: 70%;
    margin: 0 auto;
  }
  .form-submits {
    position: absolute;
    bottom: -18px;
    right: 0;
    width: calc(100% - 40px);
    background: #f2f2f2;
    padding: 20px;
    z-index: 1202;
  }
  @media only screen and (max-width: 768px) {
    .form-inputs {
      width: 100%;
      margin: 0;
    }
  }
</style>